<template>
  <div>
    <Layout class="sysLayout">
      <Sider class="sysSider" width="300">
        <div class="title"><h3><img style="position:relative;top:2px" src='../assets/UI/menu.png' height="14px" /> 功能列表</h3></div>
        <Menu
          mode="vertical"
          :active-name="manageItems[0].urlName"
          v-if="manageItems.length > 0"
          width="300"
        >
          <MenuItem
            v-for="(item, index) in manageItems"
            :key="index"
            :name="item.urlName"
            :to="{ name: item.urlName }"
            class="menuItem"
          >
            <span class="itemTitle">{{ item.name }}</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Content class="sysContent">
        <router-view></router-view>
      </Content>
    </Layout>
  </div>
</template>
<script>
export default {
  name: "SystemManage",
  data() {
    return {
      manageItems: [],
    };
  },
  methods: {
    getHeight() {
      this.$(".sysContent").height(window.innerHeight - 196);
      let height = this.$(".sysContent").height();
      console.log(height);
      this.$(".menuItem ").height(height / 12);
    },
    queryAuthList() {
      const self = this;
      self.axios.get("/authlist").then((res) => {
        if (res.data.code == 200) {
          let manageAuth = res.data.data.manageItems;

          if (manageAuth.length > 0) {
            manageAuth.forEach((item) => {
              self.manageItems.push(self.manageChange(item));
            });
          } else {
            this.$Message.info("用户没有权限");
          }
        } else {
          this.$Message.info("用户不具有权限！");
        }
      });
    },
    manageChange(input) {
      if (input == "用户管理") {
        let temp = {
          name: "用户管理",
          urlName: "yhgl",
        };
        return temp;
      } else if (input == "角色管理") {
        let temp = {
          name: "角色管理",
          urlName: "jsgl",
        };
        return temp;
      } else if (input == "类型管理") {
        let temp = {
          name: "类型管理",
          urlName: "lxgl",
        };
        return temp;
      } else if (input == "服务管理") {
        let temp = {
          name: "服务管理",
          urlName: "fwgl",
        };
        return temp;
      } else if (input == "服务授权") {
        let temp = {
          name: "服务授权",
          urlName: "fwsq",
        };
        return temp;
      } else if (input == "一张图服务配置") {
        let temp = {
          name: "一张图服务配置",
          urlName: "yztfwpz",
        };
        return temp;
      } else {
        let temp = {};
        return temp;
      }
    },
  },
  mounted() {
    this.getHeight();
    this.$(window).resize(() => {
      this.getHeight();
    });
  },
  created() {
    this.queryAuthList();
  },
};
</script>
<style lang='scss' scoped>
.menuItem {
  display: flex !important;
  font-size: 20px !important;
  align-items: center;
  justify-content: center;
  color: rgb(6, 65, 86) !important;
  height: 5rem;
}
.ivu-menu-item-active {
  font-weight: bold;
  background: linear-gradient(45deg, white, #f2f2f2) !important;
}
.ivu-menu-item-active:not(.ivu-menu-submenu):after {
  content: "";
  display: block;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #2d8cf0;
}
.sysLayout {
  position: relative;
  padding: 25px 25px;
  background: #f2f2f2;
  .sysSider {
    margin-right: 60px;
    background: white !important;
    overflow-y: auto;
    .title {
      background: rgb(1, 63, 85);
      color: white;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
  
    }
  }
  .sysContent {
    width: 80%;
    overflow-y: auto;
    background: white;
    padding: 35px;
  }
}
</style>
